<!--
  * @Author: ws
  * @Date: 2024-01-05 13:37:30
  * @email: 458658538@qq.com
  * @LastEditors: ws
  * @LastEditTime: 2024-01-11 14:37:18
  * @Description: 
-->
<template>
  <div class="lr-layout">
    <div class="layout-left">
      <slot name="left"></slot>
    </div>
    <div :class="`layout-right flex-1 overflow-hidden ${showLeft ? 'ml-[22px]' : 'ml-[0px]'} ${className}`">
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: "LrLayout",
  props: {
    showLeft: {
      type: Boolean,
      default: true,
    },
    className: {
      type: String,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.lr-layout {
  display: flex;
  position: absolute;
  width: 100%;
  height: calc(100% - #{$g-tabbar-height} - #{$g-topbar-height});
  padding: 20px;

  .layout-left {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08);
    box-sizing: border-box;
  }

  .layout-right {
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 0.08);
    box-sizing: border-box;

    .right-main {
      display: flex;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }
  }

  .MyDragResize {
    ::v-deep .cursor-ew-resize {
      right: -15px;
      width: 20px;
    }
  }

  ::v-deep .TFileList {
    .common-three-bg {
      padding-left: 10px;
      font-weight: bold;

      .common-three-title {
        margin-right: 4px;
      }
    }
  }
}
</style>
